// 经营状况
<template>
  <div class="home-chart-box">
    <el-dialog :title="dialogName" :visible.sync="dialogShow" width="60%" :close-on-click-modal="false">
      <el-table :border="false" :data="tableData" max-height="390" stripe>
        <el-table-column align="center" label="项目名称" prop="projectName">
          <template slot-scope="scope">
            <span>{{ scope.row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划金额" prop="planPrice"></el-table-column>

        <el-table-column v-if="pageType == 1 || pageType == 2" align="center" label="收入总金额" prop="practicalPrice"></el-table-column>
        <el-table-column v-if="pageType == 3 || pageType == 4" align="center" label="支出总金额" prop="practicalPrice"></el-table-column>

        <el-table-column v-if="pageType == 1" align="center" label="欠费金额" prop="owedPrice"></el-table-column>
        <el-table-column align="center" label="计划达成率">
          <template slot-scope="scope">
            <el-progress type="line" :percentage="getNum(scope.row.completeness)" :color="getColor(scope.row.completeness)"></el-progress>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  //pageType 1:经营收入现金流 2:经营收入权责 3:经营支出现金流 4:资本性支出现金流
  import echarts from 'echarts';
  import { apiViewOperateCapture } from '@a/index';
  import { toFixedTwo } from '@/common/js/utils';

  export default {
    name: 'arrerage',
    props: {},
    data() {
      return {
        dialogShow: false,
        dialogName: '',
        pageType: '',
        tableData: [],
      };
    },

    methods: {
      init(type, dialogName, list) {
        this.dialogName = dialogName;
        this.tableData = list;
        this.pageType = type;
        this.dialogShow = true;
      },

      getColor(num) {
        num = Number(num);
        if (num > 0 && num < 33) {
          return '#3384FE';
        } else if (num >= 33 && num < 66) {
          return '#F79100';
        } else {
          return '#FF0000';
        }
      },

      getNum(num) {
        num = Number(num);
        num = num * 100;
        num = toFixedTwo(num);
        num = num > 100 ? 100 : num;
        return num;
      },
    },
  };
</script>

<style lang="scss" scoped></style>
